<template>
	<!-- pages/chat/chat.wxml -->
	<view class="container">
		<!-- 消息列表区域 -->
		<scroll-view class="message-container" :scroll-y="true" :scroll-into-view="scrollToMessageId"
			:style="{'height':windowHeight}">

			<!-- 消息列表 -->
			<view class="message-list">
				<!-- 接收的消息 -->
				<view v-for="(item,index) in messageList" :key="index" class="message-item" :id="item.id">
					<view class="message-left" v-if="item.type === 'receive'">
						<image class="avatar" src="https://picsum.photos/200/200?random=1"></image>
						<view class="content">
							<text class="text">{{item.content}}</text>
						</view>
					</view>

					<!-- 发送的消息 -->
					<view class="message-right" v-else>
						<view class="content">
							<text class="text">{{item.content}}</text>
						</view>
						<image class="avatar" src="https://picsum.photos/200/200?random=2"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const windowHeight = ref(0)
	const messageList = ref([])
	const inputValue = ref('')
	const scrollToMessageId = ref('')
	onLoad(() => {
		let systemInfo = uni.getSystemInfoSync();
		windowHeight.value = systemInfo.windowHeight
		initMessages()
	})
	const initMessages = () => {
		messageList.value = [{
				id: 'msg1',
				type: 'receive',
				content: '你好！有什么可以帮助你的吗？'
			},
			{
				id: 'msg2',
				type: 'send',
				content: '你好，我想了解一下你们的产品。'
			},
			{
				id: 'msg3',
				type: 'receive',
				content: '当然可以，我们有多种产品供你选择。'
			}
		]
	}
</script>

<style lang="scss" scoped>
	/* pages/chat/chat.wxss */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.message-container {
		flex: 1;
		padding: 10px;
		background-color: #f5f5f5;
	}

	.message-list {
		display: flex;
		flex-direction: column;
	}

	.message-item {
		margin-bottom: 15px;
	}

	.message-left,
	.message-right {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.message-left {
		justify-content: flex-start;
	}

	.message-right {
		justify-content: flex-end;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin: 0 10px;
	}

	.content {
		max-width: 70%;
		padding: 10px;
		border-radius: 8px;
		position: relative;
	}

	.message-left .content {
		background-color: #fff;
	}

	.message-right .content {
		background-color: #95ec69;
	}

	.text {
		font-size: 16px;
	}

	.input-area {
		display: flex;
		align-items: center;
		padding: 10px;
		border-top: 1px solid #e5e5e5;
		background-color: #fff;
	}

	.input {
		flex: 1;
		height: 35px;
		padding: 0 10px;
		border: 1px solid #e5e5e5;
		border-radius: 18px;
		margin-right: 10px;
	}

	.send-btn {
		width: 60px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		border-radius: 18px;
		font-size: 14px;
	}
</style>